<script setup lang="ts">
import { computed } from 'vue'

// 接收父组件传入的 logo 字符串
const props = defineProps({
  urls: {
    type: String,
    default: ''
  }
})

// 转换成数组
const imgList = computed(() => props.urls ? props.urls.split(',').map(i => i.trim()) : [])

</script>

<template>
  <div class="demo-image__preview">
    <el-image
        style="width: 80px; height: 50px; text-align: center"
        :src="imgList[0]"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="imgList"
        fit="cover"
        show-progress
        preview-teleported
    />
  </div>
</template>

<style  lang="scss">

.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>